<template>
    <div id="theNews" @click="goToNewsDetails(theNews.id)" :style="'width: '+imgWidth+'px'">
      <ul>
        <li class="img">
          <img :src="theNews.img_src" :width="imgWidth"/>
        </li>
        <li class="title">
          <span>
            {{newsTitle}}
          </span>
        </li>
        <li class="content">
          <span>
            {{newsContent}}
          </span>
        </li>
        <li class="icon">
          <button>
            <van-icon name="arrow"/>
          </button>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "theNews",
      props:{
          theNews:{},
        imgWidth:Number,
      },
      computed:{
        newsContent:{
          get:function () {
            let wordNum=(this.imgWidth/12-3)*2;
            return this.theNews.content.substring(0,wordNum)+'...';
          },
          set:function () {}
        },
        newsTitle:{
            get(){
              let wordNum=(this.imgWidth/15-3)*2;
              return this.theNews.title.substring(0,wordNum)+'...';
            },
          set(){}
        },
        lang:{
          get(){
            let storageData = window.sessionStorage.getItem('lang');
            if(this.$store.state.lang!==storageData&&storageData!=='null'){
              this.$store.dispatch('toChangeLang', storageData);    //同步操作
            }
            return this.$store.getters.getLang;
          },
          set(){}
        },
      },
      methods:{
          goToNewsDetails(id){
            this.$emit('changeScroll');
            this.$router.push('/NewsDetails');
            this.$store.dispatch('toChangeAboutUsOrOurProductsId', '/NewsDetails');
            this.$store.dispatch('toChangeNewsId',id);
            this.$store.dispatch('toChangeNowPage', '/NewsDetails');
            let pageName = '新闻详情';
            if (this.lang === 'en') {
              pageName = 'news details';
            }
            this.$store.dispatch('toChangeCurrentPageText', pageName);
          },
      }
    }
</script>

<style scoped>
  #theNews{
    margin-left:3px;
    margin-right: 3px;
    background: #fff;
  }
  #theNews .title{
    padding:10px;
    text-align: left;
    font-size:15px;
  }
  #theNews .content{
    text-align: left;
    color:#999999;
    font-size:12px;
    padding:0 10px 10px 10px;
    line-height: 18px;
  }
  #theNews .icon button{
   border:0;
    background: rgba(0,0,0,0);
  }
  #theNews .icon{
    color:#999999;
    text-align: right;
    padding-right: 5px;
    bottom: 0;
    vertical-align: bottom;
    padding-bottom: 3px;
  }
  .van-icon{
    font-size:13px;
  }
</style>
